<template>
    <div class="managementWarp">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="走进班级" name="walkInto">

                <el-tabs tab-position="left" style="height: 714px;">
                    <el-tab-pane label="班级文章">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>班级文章</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="班级相册">
                        <div class="classAlbum">
                            <!--浏览相册组  start-->
                            <div v-if="!isAlbumEdit" class="title clerFix">
                                <label>班级相册</label>
                                <el-button type="text" @click="uploadPhotos=true">上传照片</el-button>
                                <el-button type="primary" class="addBtn" @click="addAlbum=true" size="mini">增加</el-button>
                            </div>

                            <ul v-if="!isAlbumEdit" class="albumWarp clerFix">
                                <li class="albumList" v-for="item in imgUrl" :key="item.id">
                                    <div class="imgBox">
                                        <el-image :src="item.src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="btnZu clerFix">
                                            <el-button type="primary" size="mini" @click="isAlbumEdit=true" plain>编 辑</el-button>
                                            <el-button type="danger" size="mini" class="delete" plain>删 除</el-button>
                                        </div>
                                    </div>
                                    <label>班级萌宠</label>
                                </li>
                            </ul>
                            <!--浏览相册组  end-->

                            <!--浏览相册  start-->
                            <div v-if="isAlbumEdit"  class="coverWarp clerFix">
                                <div class="cover clerFix">
                                    <div class="coverImg">
                                        <el-image :src="imgUrl[0].src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>

                                    <div class="coverName">
                                        <label>班级萌宠</label>
                                        <el-button type="primary" size="mini" @click="uploadPhotos=true">上传照片</el-button>
                                    </div>

                                </div>
                                <el-button type="primary" class="addBtn" size="mini" @click="isAlbumEdit=false">保存</el-button>
                            </div>

                            <ul v-if="isAlbumEdit" class="albumWarp clerFix">
                                <li class="albumList" v-for="item in imgUrl" :key="item.id">
                                    <div class="imgBox">
                                        <el-image :src="item.src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="btnZu clerFix">
                                            <el-button type="primary" size="mini" plain>设为封面</el-button>
                                            <el-button type="danger" size="mini" class="delete" plain>删 除</el-button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!--浏览相册组  end-->
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="教师风貌">
                        <div class="classAlbum">
                            <!--浏览相册组  start-->
                            <div v-if="!isAlbumEdit" class="title clerFix">
                                <label>教师风貌</label>
                                <el-button type="text" @click="uploadPhotos=true">上传照片</el-button>
                                <el-button type="primary" class="addBtn" @click="addAlbum=true" size="mini">增加</el-button>
                            </div>

                            <ul v-if="!isAlbumEdit" class="albumWarp clerFix">
                                <li class="albumList" v-for="item in imgUrl" :key="item.id">
                                    <div class="imgBox">
                                        <el-image :src="item.src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="btnZu clerFix">
                                            <el-button type="primary" size="mini" @click="isAlbumEdit=true" plain>编 辑</el-button>
                                            <el-button type="danger" size="mini" class="delete" plain>删 除</el-button>
                                        </div>
                                    </div>
                                    <label>班级萌宠</label>
                                </li>
                            </ul>
                            <!--浏览相册组  end-->

                            <!--浏览相册  start-->
                            <div v-if="isAlbumEdit"  class="coverWarp clerFix">
                                <div class="cover clerFix">
                                    <div class="coverImg">
                                        <el-image :src="imgUrl[0].src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>

                                    <div class="coverName">
                                        <label>班级萌宠</label>
                                        <el-button type="primary" size="mini" @click="uploadPhotos=true">上传照片</el-button>
                                    </div>

                                </div>
                                <el-button type="primary" class="addBtn" size="mini" @click="isAlbumEdit=false">保存</el-button>
                            </div>

                            <ul v-if="isAlbumEdit" class="albumWarp clerFix">
                                <li class="albumList" v-for="item in imgUrl" :key="item.id">
                                    <div class="imgBox">
                                        <el-image :src="item.src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="btnZu clerFix">
                                            <el-button type="primary" size="mini" plain>设为封面</el-button>
                                            <el-button type="danger" size="mini" class="delete" plain>删 除</el-button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!--浏览相册组  end-->
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="学生风采">
                        <div class="classAlbum">
                            <!--浏览相册组  start-->
                            <div v-if="!isAlbumEdit" class="title clerFix">
                                <label>学生风采</label>
                                <el-button type="text" @click="uploadPhotos=true">上传照片</el-button>
                                <el-button type="primary" class="addBtn" @click="addAlbum=true" size="mini">增加</el-button>
                            </div>

                            <ul v-if="!isAlbumEdit" class="albumWarp clerFix">
                                <li class="albumList" v-for="item in imgUrl" :key="item.id">
                                    <div class="imgBox">
                                        <el-image :src="item.src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="btnZu clerFix">
                                            <el-button type="primary" size="mini" @click="isAlbumEdit=true" plain>编 辑</el-button>
                                            <el-button type="danger" size="mini" class="delete" plain>删 除</el-button>
                                        </div>
                                    </div>
                                    <label>班级萌宠</label>
                                </li>
                            </ul>
                            <!--浏览相册组  end-->

                            <!--浏览相册  start-->
                            <div v-if="isAlbumEdit"  class="coverWarp clerFix">
                                <div class="cover clerFix">
                                    <div class="coverImg">
                                        <el-image :src="imgUrl[0].src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>

                                    <div class="coverName">
                                        <label>班级萌宠</label>
                                        <el-button type="primary" size="mini" @click="uploadPhotos=true">上传照片</el-button>
                                    </div>

                                </div>
                                <el-button type="primary" class="addBtn" size="mini" @click="isAlbumEdit=false">保存</el-button>
                            </div>

                            <ul v-if="isAlbumEdit" class="albumWarp clerFix">
                                <li class="albumList" v-for="item in imgUrl" :key="item.id">
                                    <div class="imgBox">
                                        <el-image :src="item.src">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="btnZu clerFix">
                                            <el-button type="primary" size="mini" plain>设为封面</el-button>
                                            <el-button type="danger" size="mini" class="delete" plain>删 除</el-button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!--浏览相册组  end-->
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div></el-tab-pane>
                </el-tabs>

            </el-tab-pane>
            <el-tab-pane label="班级资讯" name="Information">

                <el-tabs tab-position="left" style="height: 714px;">
                    <el-tab-pane label="班级公告">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>班级公告</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="班级新闻">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>班级新闻</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>

            </el-tab-pane>
            <el-tab-pane label="班级资源" name="resources">
                <div class="resourcesWarp">
                    <div class="title clerFix">
                        <label>班级资源</label>
                        <el-button type="text" v-if="!isShow" @click="isShow=true">资源管理</el-button>
                        <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                        <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                        <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                        <div class="addBtn">
                            <el-button plain size="mini">审核</el-button>
                            <el-button plain size="mini" @click="isResources=true">新增资源</el-button>
                        </div>
                    </div>

                    <div class="resources">
                        <div class="resourcesList">
                            <el-checkbox v-if="isShow" class="checked"></el-checkbox>
                            <resource-common></resource-common>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="班级活动" name="activity">
                <el-tabs tab-position="left" style="height: 714px;">
                    <el-tab-pane label="每周班会">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>每周班会</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="班级记事">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>班级记事</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="班级动态" name="dynamic">
                <div class="classDynamic">
                    <div class="dynamicTitle clerFix">
                        <label>班级动态</label>
                        <el-button class="addBtn" type="primary" size="mini" @click="increaseDynamic=true">新增动态</el-button>
                    </div>

                    <div class="dynamicList clerFix">
                        <div class="avatar">
                            <el-avatar :size="50" :src="imgUrl[2].src" @error="errorHandler">
                                <img :src="imgUrl[2].src"/>
                            </el-avatar>
                            <label>杨丽</label>
                        </div>
                        <div class="dyContent">
                            <p>长春有什么好玩的地方？</p>
                            <ul class="imgWarp clerFix">
                                <li class="imgList">
                                    <el-image :src="imgUrl[2].src">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                    </el-image>
                                </li>
                            </ul>
                            <div class="timeWarp clerFix">
                                <div class="time">
                                    <label>2020-4-28 <span>16:20</span> </label>
                                </div>
                                <div class="comment">
                                    <label><i class="el-icon-thumb"></i> 1</label>
                                    <el-divider direction="vertical"></el-divider>
                                    <label><i class="el-icon-chat-dot-square"></i> 1</label>
                                    <el-divider direction="vertical"></el-divider>
                                    <label><i class="el-icon-document-copy"></i> 1</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="学生天地" name="heavenEarth">
                <el-tabs tab-position="left" style="height: 714px;">
                    <el-tab-pane label="国旗下的讲话">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>国旗下的讲话</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="学生荣誉">
                        <div class="classArticle">
                            <div class="title clerFix">
                                <label>学生荣誉</label>
                                <el-button type="text" v-if="!isShow" @click="isShow=true">管理文章</el-button>
                                <el-button type="text" v-if="isShow" style="margin-right: 12px;" @click="isShow=false">退出管理</el-button>

                                <el-checkbox v-if="isShow" :indeterminate="true" v-model="checkAll">全选</el-checkbox>

                                <el-button v-if="isShow" type="text" @click="handleDelete">删除</el-button>

                                <el-button type="primary" class="addBtn" size="mini" @click="isEdit=true">增加</el-button>
                            </div>

                            <div class="warpBox">
                                <div class="warp clerFix" v-for="item in 10" :key="item">
                                    <div class="articleTitle">
                                        <el-checkbox v-if="isShow" style="margin-right: 15px;"></el-checkbox>
                                        <label>如何让富婆爱上你</label>
                                    </div>
                                    <div class="timeBtn">
                                        <label>2025-5-20</label>
                                        <el-button type="primary" plain size="mini" @click="isEdit=true">编辑</el-button>
                                        <el-button type="danger" plain size="mini" @click="handleDelete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[100, 200, 300, 400]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="400">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>

        <!--修改/添加文章 -->
        <el-dialog
                title="修改文章"
                :visible.sync="isEdit"
                width="800px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input placeholder="请输入标题" v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <WangEditor :catchData="catchData"></WangEditor>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                                    <el-button type="primary" size="mini" @click="isEdit = false">完 成</el-button>
                                    <el-button type="primary" size="mini" @click="isEdit = false">保 存</el-button>
                                </span>
        </el-dialog>

        <!--新增相册-->
        <el-dialog
                title="新增相册"
                :visible.sync="addAlbum"
                width="600px">
            <el-form ref="form" label-width="80px">
                <el-form-item label="相册名称">
                    <el-input placeholder="请输入标题" v-model="albumName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="addAlbum = false">确定</el-button>
            </span>
        </el-dialog>

        <!--上传相片-->
        <el-dialog
                title="上传照片"
                :visible.sync="uploadPhotos"
                width="690px"
                center>
            <div class="uploadPhotosBox">
                <div class="uploadTo">
                    <label>上传到：</label>
                    <el-select v-model="uploadTo" placeholder="请选择">
                        <el-option label="枯木会逢春" value="shanghai"></el-option>
                        <el-option label="回不去的家乡" value="beijing"></el-option>
                        <el-option label="故乡" value="beijing"></el-option>
                    </el-select>
                </div>
                <div class="uploadList">
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :multiple="true"
                            accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="uploadPhotos = false">上传照片</el-button>
                <el-button type="primary" size="mini" @click="uploadPhotos = false">完成</el-button>
            </span>
        </el-dialog>

        <!--新增资源-->
        <el-dialog
                title="新增资源"
                :visible.sync="isResources"
                width="600px">
            <el-form ref="form" v-model="formResources" label-width="80px">
                <el-form-item label="资源文件">
                    <el-input placeholder="请输入标题" v-model="formResources.file"></el-input>
                </el-form-item>
                <el-form-item label="资源类型">
                    <el-select v-model="formResources.type" placeholder="请选择" style="width: 100%;">
                        <el-option label="试卷" value="shanghai"></el-option>
                        <el-option label="试题" value="beijing"></el-option>
                        <el-option label="教案" value="jaoan"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源名称">
                    <el-input v-model="formResources.name" placeholder="请输入标题" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="isResources = false">确 认</el-button>
            </span>
        </el-dialog>

        <!--新增动态-->
        <el-dialog
                title="新增动态"
                :visible.sync="increaseDynamic"
                width="800px">
            <div class="DynamicPoho">
                <label>动态配图（最多三张配图）：</label>
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreviewDynamic"
                        :on-remove="handleRemoveDynamic">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="DynamicdialogVisible">
                    <img width="100%" :src="DynamicdialogImageUrl" alt="">
                </el-dialog>
            </div>

            <div class="editOr">
                <label>动态信息：</label>
                <WangEditor :catchData="catchData"></WangEditor>
            </div>


            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="increaseDynamic = false">发 布</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import ResourceCommon from '@/components/resource/resourceCommon'
    import WangEditor from '@c/wangeditor/wangeditor'
    export default {
        components:{
            ResourceCommon,
            WangEditor
        },
        data(){
          return{
              isDetailShow:false,
              activeName:'walkInto',
              activeIndex:1,
              currentPage:1,
              isEdit:false,
              form:{
                  title:"",
                  content:""
              },
              checkAll:false,
              isShow:false,
              imgUrl:[{
                  id:1,
                  src:require('../../assets/img/headportrait01.jpg'),
              },{
                  id:2,
                  src:require('../../assets/img/headportrait03.jpg')
              },{
                  id:3,
                  src:require('../../assets/img/album03.jpg')
              }],
              isAlbumEdit:false,
              albumName:"",
              addAlbum:false,
              uploadTo:"",
              uploadPhotos:false,
              dialogImageUrl: '',
              dialogVisible: false,
              isResources:false,
              formResources:{
                  file:'',
                  type:'',
                  name:""
              },
              increaseDynamic:false,
              DynamicdialogImageUrl: '',
              DynamicdialogVisible: false,

              editorContent: ''

          }
        },
        methods:{
            handleClick(tab, event) {
            },

            handleSelectManagement(tab, event){
                this.activeIndex = tab*1
                this.isDetailShow = false
            },

            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
            },

            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            handleRemoveDynamic(file, fileList) {
            },

            handlePictureCardPreviewDynamic(file) {
                this.DynamicdialogImageUrl = file.url;
                this.DynamicdialogVisible = true;
            },

            errorHandler(){
                return true
            },

            handleDelete(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            catchData(edit){
                this.editorContent = edit
            }
        }
    }
</script>

<style lang="scss" scoped>
.managementWarp{
    width: 81%;
    margin: 0 auto;
    background-color: white;
    box-sizing: border-box;
    padding: 0 15px;
    margin-top: 20px;
    
    .leftBox{
        padding: 20px 0;
        height: 82vh;
    }

    .mainBox{
        padding: 20px 10px 20px 20px;
    }

    .title{
        text-align: left;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        label{
            color: #303133;
            margin-right: 15px;
        }
        .addBtn{
            float: right;
        }
    }



    .warp{
        margin-bottom: 12px;
        .articleTitle{
            font-size: 14px;
            color: #303133;
            float: left;
        }
        .timeBtn{
            font-size: 12px;
            color: #909399;
            float: right;
            label{
                margin-right: 12px;
            }
        }
    }

    .coverWarp{
        .cover{
            float: left;
            .coverImg{
                float: left;
                width: 150px;
                height: 150px;
                overflow: hidden;
                border-radius: 10px;
            }
            .coverName{
                float: left;
                margin-left: 10px;
                label{
                    display: block;
                    font-weight: bold;
                    font-size: 18px;
                    margin-bottom: 20px;
                    margin-top: 35px;
                }
            }
        }
        .addBtn{
            float: right;
            margin-top: 78px;
        }
    }

    .albumWarp{
        margin-top: 10px;
        .albumList{
            float: left;
            width: 192px;
            height: 220px;
            position: relative;
            overflow: hidden;
            margin-right: 10px;
            margin-bottom: 10px;
            .imgBox{
                width: 192px;
                height: 192px;
                position: relative;
                overflow: hidden;
                .btnZu{
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background-color: rgba(255,255,255,.6);
                    box-sizing: border-box;
                    padding: 5px;
                    text-align: left;
                    display: none;
                    .delete{
                        float: right;
                    }

                }
            }
            label{
                font-size: 14px;
                margin-top: 5px;
                display: block;
            }

        }
        .albumList:hover .btnZu{
            display: block;
        }
    }

    .block{
        margin: 20px 0;
    }

    .resourcesWarp{
        box-sizing: border-box;
        padding: 0 20px;
        .resources{
            margin-top: 10px;
            .resourcesList{
                margin-bottom: 10px;
                text-align: left;
                position: relative;
                padding-bottom: 10px;
                border-bottom: 1px solid #ccc;
                .checked{
                    position: absolute;
                    top: 20px;
                    left: 0;
                }
                .typeName{
                    font-size: 16px;
                    margin-left: 30px;
                    color: #303133;
                    span{
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 2px 4px;
                        border: 1px solid #99CCFF;
                        border-radius: 4px;
                        margin-right: 10px;
                    }
                }
                .tiemWarp{
                    font-size: 14px;
                    margin-left: 30px;
                    color: #303133;
                    margin-top: 6px;
                    label{
                        margin-right: 50px;
                        span{
                            margin-left: 10px;
                        }
                    }
                }
                .download{
                    position: absolute;
                    right: 0;
                    top: 15px;
                }
            }
        }
    }

    .classDynamic{
        box-sizing: border-box;
        padding: 0 10px;
        .dynamicTitle{
            text-align: left;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
            padding-bottom: 5px;
            label{
                color: #303133;
                margin-right: 15px;
                margin-top: 10px;
                display: inline-block;
            }
            .addBtn{
                float: right;
            }
        }

        .dynamicList{
            margin: 10px;
            .avatar{
                float: left;
                label{
                    display: block;
                    font-size: 14px;
                    color: #303133;
                }
            }
            .dyContent{
                width: calc(100% - 65px);
                float: left;
                margin-left: 10px;
                p{
                    margin-block-start: 0;
                    margin-block-end: 0;
                    text-align: justify;
                    color: #303133;
                    font-size: 14px;
                    margin: 10px 0;
                }
                .imgWarp{
                    .imgList{
                        float: left;
                        width: 182px;
                        height: 182px;
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                }
                .timeWarp{
                    .time{
                        font-size: 12px;
                        color: #303133;
                        float: left;
                        margin-top: 6px;
                    }
                    .comment{
                        float: right;
                        label{
                            font-size: 14px;
                            color: #303133;
                            cursor: pointer;
                        }
                    }
                }
            }

        }
    }

    .DynamicPoho{
        text-align: left;
    }

    .editOr{
        text-align: left;
        width: 100%;
        margin-top: 10px;
    }

    ul{
        list-style-type: none;
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
    }

    .clerFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }

}

.uploadPhotosBox{
    .uploadTo{
        .sizeLeft{
            margin-left: 22px;
        }
    }
    .uploadList{
        margin: 15px 0;
        box-sizing: border-box;
        padding: 5px;
        background-color: #f5f7fa;
    }
    .btn{
        label{
            margin-left: 15px;
        }
    }
}
</style>